import React, { Fragment, useEffect, useState } from 'react';
import CourseItem, { ICourseItemProps } from '../../component/CourseItem';
import './index.less';
import { Divider, RadioChangeEvent } from 'antd';
import { Radio, Tabs } from 'antd';
import { SpaceContext } from 'antd/lib/space';

type TabPosition = 'left' | 'right' | 'top' | 'bottom';

export default function Course() {
    const [data, setData] = useState<ICourseItemProps[]>([]);
    useEffect(() => {
        setData([
            {
                name: '数据结构',
                introduction:
                    '数据结构是计算机存储、组织数据的方式。数据结构是指相互之间存在一种或多种特定关系的数据元素的集合。通常情况下，精心选择的数据结构可以带来更高的运行或者存储效率。数据结构往往同高效的检索算法和索引技术有关。',
                school: '华中科技大学',
                college: '计算机',
                score: 100,
                commentNum: 23,
                key: '1',
            },
            {
                name: '微积分',
                introduction:
                    '微积分（Calculus），数学概念，是高等数学中研究函数的微分（Differentiation）、积分（Integration）以及有关概念和应用的数学分支。它是数学的一个基础学科，内容主要包括极限、微分学、积分学及其应用。微分学包括求导数的运算，是一套关于变化率的理论。它使得函数、速度、加速度和曲线的斜率等均可用一套通用的符号进行讨论。积分学，包括求积分的运算，为定义和计算面积、体积等提供一套通用的方法。',
                school: '同济大学',
                college: '数学',
                score: 90,
                commentNum: 23,
                key: '2',
            },
            {
                name: '工程绘图',
                introduction:
                    '工程制图是一个工程技术中的一个重要过程。在高等工科课程中，它是一门重要的基础必修课。该课程是研究工程图样的绘制和阅读的一门学科。它研究用投影法（可参见画法几何）解决空间几何问题，在平面上表达空间物体。',
                school: '华中科技大学',
                college: '机械',
                score: 97,
                commentNum: 23,
                key: '3',
            },
            {
                name: '应用光学',
                introduction:
                    '应用光学的传统概念是指经过光学仪器（望远镜、显微镜、照相机、投影仪）等光学系统的理论与设计，它的内容主要是几何光学和波动光学。随着光学学科的飞速发展，如激光的出现及其广泛的应用，光纤通信和光电子成像技术的发展，光学与计算机技术的结合等都使光学仪器经历着由传统到现代的巨大转变。',
                school: '华中科技大学',
                college: '光电',
                score: 95,
                commentNum: 23,
                key: '4',
            },
            {
                name: '免疫学',
                introduction:
                    '所谓“免疫”原由拉丁字“immunis”而来，其原意为“免除税收”（exceptionfromcharges）， 也包含着“免于疫患”之意。免疫学是研究生物体对抗原物质免疫应答性及其方法的生物-医学科学。免疫应答是机体对抗原刺激的反应，也是对抗原物质进行识别和排除的一种生物学过程。',
                school: '华中科技大学',
                college: '临床医学',
                score: 95,
                commentNum: 23,
                key: '5',
            },
        ]);
    }, []);

    return (
        <main className="course">
            <div className="search_block">
                <input type="text" placeholder="请输入课程关键字" className="search_input" />
                <span className="search_icon"></span>
            </div>

            <div className="condition">
                <span>专业：</span>
                <Tabs
                    defaultActiveKey="0"
                    style={{ height: 220 }}
                    items={new Array(13).fill(null).map((_, i) => {
                        const id = String(i);
                        return {
                            label: `Tab-${id}`,
                            //label: <span></span>,
                            key: id,
                            children: (
                                <div className="data">
                                    {data.map((id) => (
                                        <Fragment key={id.key}>
                                            <CourseItem
                                                name={id.name}
                                                introduction={id.introduction}
                                                school={id.school}
                                                college={id.college}
                                                score={id.score}
                                                commentNum={id.commentNum}
                                            />
                                        </Fragment>
                                    ))}
                                </div>
                            ),
                        };
                    })}
                />
            </div>
        </main>
    );
}
